import { defineComponent, ref, reactive, computed, watch } from 'vue';
import { useRoute } from 'vue-router'
import { Fold, Expand } from '@element-plus/icons'
import { nodeHistory } from '@/api/service-event'
import { BpmnStore } from '@/components/BpmnEditor/bpmn/store';
import DynamicTable from '@/components/DynamicTable'
import { parseTime, simpleDuration } from '@/utils'

import './panel.scss';

export default defineComponent({
  name: 'Panel',
  setup () {
    const route = useRoute()
    const bpmnContext = BpmnStore;
    const contextState = bpmnContext.getState();

    const panelState = reactive({
      //panel面板的开关
      shrinkageOff: false,
    });

    watch(
      () => contextState.activeBindDefine,
      () => {
        nodeInfo.value = {} // 清空旧数据
        getNodeDetail(contextState.businessObject.id)
      },
    );

    /**
     * 节点信息 运行状态
     */
    const nodeInfo = ref() // 节点信息
    // 获取该节点信息
    const getNodeDetail = async (nodeId) => {
      if (['bpmn:Process', 'bpmn:SequenceFlow'].includes(contextState.businessObject.$type)) {
        return
      }
      const res = await nodeHistory(route.params.id, nodeId)
      if (res.status === 200) {
        nodeInfo.value = res.data
      }
    }


    /**
     * 参数表格
     */
    const nodeParams = computed(() => {
      try {
        return contextState.businessObject.extensionElements.values.map(item => {
          return { key: item.name, value: item.expression }
        })
      } catch (e) {
        return []
      }
    })

    const variables = computed(() => {
      try {
        return JSON.parse(nodeInfo.value?.variables)
      } catch(e) {
        return false
      }
    })

    const variablesTableCol = ref([
      { label: '参数英文名', key: 'paramName' },
      { label: '参数中文名', key: 'paramNameCn' },
      { label: '值', key: 'testValue' },
      { label: '类型', key: 'type' }
    ])

    return () => (
      <>
        {contextState.isActive && contextState.businessObject && contextState.activeBindDefine && (
          <>
            <div
              class="bpmn-panel-shrinkage"
              onClick={() => (panelState.shrinkageOff = !panelState.shrinkageOff)}
            >
              {panelState.shrinkageOff ? (
                <el-icon><Fold /></el-icon>
              ) : (
                <el-icon><Expand /></el-icon>
              )}
            </div>
            <div class="bpmn-panel" v-show={!panelState.shrinkageOff}>
              <div class="title">{bpmnContext.getActiveElementName()}</div>
              <el-form class="info">
                <el-form-item label="节点ID">
                  {contextState.businessObject.id}
                </el-form-item>
                <el-form-item label="节点名称">
                  {contextState.businessObject.name}
                </el-form-item>
                <el-form-item
                  v-show={nodeInfo.value.startTime}
                  label="开始时间"
                >
                  {parseTime(nodeInfo.value?.startTime)}
                </el-form-item>
                <el-form-item
                  v-show={nodeInfo.value.endTime}
                  label="结束时间"
                >
                  {parseTime(nodeInfo.value?.endTime)}
                </el-form-item>
                <el-form-item
                  v-show={nodeInfo.value.duration}
                  label="运行时长"
                >
                  {simpleDuration(nodeInfo.value.duration)}
                </el-form-item>
                <el-form-item
                  v-show={nodeInfo.value.assignee}
                  label="处理人"
                >
                  {nodeInfo.value.assignee}
                </el-form-item>
                <el-form-item
                  label="服务ID"
                >
                  {nodeParams?.value[0].value}
                </el-form-item>
                <el-form-item
                  label="入参格式"
                >
                  {nodeParams?.value[1].value}
                </el-form-item>
              </el-form>
              
              <div v-show={variables.value}>
                <h4 class="divider">入参</h4>
                <DynamicTable
                  columns={variablesTableCol.value}
                  data={Array.isArray(variables.value.IN) ? variables.value.IN : []}
                  showPagination={false}
                />

                <h4 class="divider">出参</h4>
                <DynamicTable
                  columns={variablesTableCol.value}
                  data={Array.isArray(variables.value.OUT) ? variables.value.OUT : []}
                  showPagination={false}
                />
              </div>
            </div>
          </>
        )}
      </>
    );
  },
});
